<template>
    <div>
        <app-head></app-head>
        <app-body>


            <txt style="font-size: 30px;">我的保单</txt>
            <br>
            <br>
            <br>
            <br>
            <br>

            <el-card class="box-card" v-for="(item, index) in orders" :key="index">

                <div v-if="item.bxId == 1">
                    <p>订单编号:{{ item.orderNumber }}</p>
                    <el-button style="float: right; "  size="medium">¥999</el-button>
                    <span style="font-size: 20px; color:#606266;"><i class="el-icon-s-flag" style="color: red;"></i>
                        机动车辆损失险</span>
                        <p>订单时间:{{ item.createTime }}</p>
                </div>

                <div v-if="item.bxId == 2">
                    <p>订单编号:{{ item.orderNumber }}</p>
                    <el-button style="float: right; "  size="medium">¥888</el-button>
                    <span style="font-size: 20px; color:#606266;"><i class="el-icon-s-flag" style="color: red;"></i>
                        车上人员责任险</span>
                        <p>订单时间:{{ item.createTime }}</p>
                </div>

                <div v-if="item.bxId == 3">
                    <p>订单编号:{{ item.orderNumber }}</p>
                    <el-button style="float: right; "  size="medium">¥999</el-button>
                    <span style="font-size: 20px; color:#606266;"><i class="el-icon-s-flag" style="color: red;"></i>
                        第三者责任险</span>
                        <p>订单时间:{{ item.createTime }}</p>
                </div>

                <div v-if="item.bxId == 4">
                    <p>订单编号:{{ item.orderNumber }}</p>
                    <el-button style="float: right; "  size="medium">¥999</el-button>
                    <span style="font-size: 20px; color:#606266;"><i class="el-icon-s-flag" style="color: red;"></i>
                        车身划痕损失险</span>
                        <p>订单时间:{{ item.createTime }}</p>
                </div>

                <div v-if="item.bxId == 5">
                    <p>订单编号:{{ item.orderNumber }}</p>
                    <el-button style="float: right; "  size="medium">¥999</el-button>
                    <span style="font-size: 20px; color:#606266;"><i class="el-icon-s-flag" style="color: red;"></i>
                        强制险</span>
                        <p>订单时间:{{ item.createTime }}</p>
                </div>

            </el-card>



            <br>

        </app-body>
    </div>
</template>

<script>
import AppHead from '../common/AppHeader.vue';
import AppBody from '../common/AppPageBody.vue'
import AppFoot from '../common/AppFoot.vue'

export default {
    name: "my",
    components: {
        AppHead,
        AppBody,
        AppFoot
    },
    data() {
        return {

            // 订单列表
            orders: [],

            dialogVisible: false,

            images: [
                { id: 0, idView: require('../../assets/homeImages/1.png') },
                { id: 1, idView: require('../../assets/homeImages/2.png') }
            ],
            className: "",

            labelName: '0',
            idleList: [],
            currentPage: 1,
            totalItem: 1
        };
    },
    created() {
        // 获取订单
        this.getOrder();
    },
    watch: {
        $route(to, from) {
            this.labelName = to.query.labelName;
            let val = parseInt(to.query.page) ? parseInt(to.query.page) : 1;
            // let totalPage=parseInt(this.totalItem/8)+1;
            // val=parseInt(val%totalPage);
            // val=val===0?totalPage:val;
            this.currentPage = parseInt(to.query.page) ? parseInt(to.query.page) : 1;
            this.findIdleTiem(val);
        }
    },
    mounted() {
        this.className = "lun-img-two";
        setTimeout(() => {
            this.className = "lun-img";
        }, 300);
    },

    methods: {

        getOrder() {
            this.$api.getMyOrder().then(res => {
                console.log(res);
                if (res.status_code === 1) {
                    this.orders = res.data
                } else {
                    this.$message.error(res.msg);
                }
            });
        },


        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },

        changeImg: function (e) {
            this.className = "lun-img-two";
            setTimeout(() => {
                this.className = "lun-img";
            }, 300);
        },

        findIdleTiem(page) {
            const loading = this.$loading({
                lock: true,
                text: '加载数据中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0)'
            });
            if (this.labelName > 0) {
                this.$api.findIdleTiemByLable({
                    idleLabel: this.labelName,
                    page: page,
                    nums: 8
                }).then(res => {
                    console.log(res);
                    let list = res.data.list;
                    for (let i = 0; i < list.length; i++) {
                        list[i].timeStr = list[i].releaseTime.substring(0, 10) + " " + list[i].releaseTime.substring(11, 19);
                        let pictureList = JSON.parse(list[i].pictureList);
                        list[i].imgUrl = pictureList.length > 0 ? pictureList[0] : '';
                    }
                    this.idleList = list;
                    this.totalItem = res.data.count;
                    console.log(this.totalItem);
                }).catch(e => {
                    console.log(e)
                }).finally(() => {
                    loading.close();
                })
            } else {
                this.$api.findIdleTiem({
                    page: page,
                    nums: 8
                }).then(res => {
                    console.log(res);
                    let list = res.data.list;
                    for (let i = 0; i < list.length; i++) {
                        list[i].timeStr = list[i].releaseTime.substring(0, 10) + " " + list[i].releaseTime.substring(11, 19);
                        let pictureList = JSON.parse(list[i].pictureList);
                        list[i].imgUrl = pictureList.length > 0 ? pictureList[0] : '';
                    }
                    this.idleList = list;
                    this.totalItem = res.data.count;
                    console.log(this.totalItem);
                }).catch(e => {
                    console.log(e)
                }).finally(() => {
                    loading.close();
                })
            }
        },
        handleClick(tab, event) {
            // console.log(tab,event);
            console.log(this.labelName);
            this.$router.replace({ query: { page: 1, labelName: this.labelName } });
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.$router.replace({ query: { page: val, labelName: this.labelName } });
        },
        toDetails(idle) {
            this.$router.push({ path: '/details', query: { id: idle.id } });
        }
    }
}
</script>

<style scoped>
.idle-card {
    height: 300px;
    border: #eeeeee solid 1px;
    margin-bottom: 15px;
    cursor: pointer;
}

.fenye {
    display: flex;
    justify-content: center;
    height: 60px;
    align-items: center;
}

.idle-title {
    font-size: 18px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 10px;
}

.idle-prive {
    font-size: 16px;
    color: red;
}

.idle-place {
    font-size: 13px;
    color: #666666;
    float: right;
    padding-right: 20px;

}

.idle-time {
    color: #666666;
    font-size: 12px;
    margin: 0 10px;
}

.user-nickname {
    color: #999999;
    font-size: 12px;
    display: flex;
    align-items: center;
    height: 30px;
    padding-left: 10px;
}

.user-info {
    margin-top: 10px;
    float: right;
    padding: 5px 10px;
    height: 30px;
    display: flex;
}

.circle-div {
    width: 100px;
    /* 或者你想要的宽度 */
    height: 100px;
    /* 宽度和高度设为相同值以保持圆形 */
    background-color: #e75c09;
    /* 背景颜色 */
    border-radius: 50%;
    /* 将div变为圆形 */
    display: flex;
    align-items: center;
    /* 使内容垂直居中 */
    justify-content: center;
    /* 使内容水平居中 */
    color: white;
    /* 文字颜色 */
    font-size: 16px;
    /* 文字大小 */
}
</style>